<template>
    <div class="usercenter">
        <div class="header">
            <div class="header_title">
                <div class="title_avatar">
                    <img :src="business.avatar_cdn" />
                </div>
                <div class="title_content">
                    <div class="content_text">{{ business.nickname }}</div>
                    <div class="content_sm">{{ business.mobile_text }}</div>
                </div>
            </div>
        </div>
        <div class="userorder">
            <div class="order_project">
                <div class="item">
                    <router-link to="/sale/poster" class="item">
                        <div class="img"> <img src="/assets/images/retail1.png" alt=""></div>
                        分销信息
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/sale/business" class="item">
                        <div class="img"> <img src="/assets/images/retail2.png" alt=""></div>
                        分销会员
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/sale/money" class="item">
                        <div class="img"> <img src="/assets/images/retail3.png" alt=""></div>
                        分销佣金
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/coupon" class="item">
                        <div class="img"> <img src="/assets/images/coupon.png" alt=""></div>
                        优惠列表
                    </router-link>
                </div>
                <div class="item solid-left">
                    <router-link to="/business/pay" class="item">
                        <div class="img"> <img src="/assets/images/recharge2.png" alt=""></div>
                        充值中心
                    </router-link>
                </div>
            </div>
        </div>
        <div class="usertool">
            <div class="list">
                <div class="item">
                    <router-link to="/business/profile">
                        <div class="img">
                            <img src="/assets/images/profile.png" alt="">
                        </div>
                        基本资料
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/business/email">
                        <div class="img"> <img src="/assets/images/email.png" alt=""></div>
                        邮箱认证
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/address">
                        <div class="img"> <img src="/assets/images/address.png" alt=""></div>
                        收货地址
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/business/record">
                        <div class="img">
                            <img src="/assets/images/consume.png" alt="">
                        </div>
                        消费记录
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/order">
                        <div class="img">
                            <img src="/assets/images/recharge2.png" alt="">
                        </div>
                        我的订单
                    </router-link>
                </div>
                <div class="item">
                    <a href="javascript:void(0)" @click="OnLogout">
                        <div class="img">
                            <img src="/assets/images/returns.png" alt="">
                        </div>
                        退出登录
                    </a>
                </div>
            </div>
        </div>
        <div class="userorder" v-if="ProductList.length > 0">
            <div class="list">
                <div class="item" v-for="item in ProductList" :key="item.id">
                    <router-link :to="{path:'/product/info',query:{proid:item.id}}">
                        <div class="thumb">
                            <van-image
                                width="100%"
                                height="150px"
                                fit="cover"
                                :src="item.thumb_text"
                            />
                        </div>
                        <div class="name">{{ item.name }}</div>
                        <div class="box">
                            <div class="price">
                                <span v-if="item.live_price > 0">￥{{ item.live_price }}</span>
                                <span :class="item.live_price ? 'product_price' : ''">￥{{ item.price }}</span>
                            </div>
                            <div class="buy-count">{{ item.buy_count }}人付款</div>
                        </div>
                        <div class="box">
                            <div class="region">{{ item.region_text }}</div>
                            <div class="chat"><van-icon name="chat-o" color="#ff5000" size="16" /></div>
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const business = proxy.$business;

const ProductList = ref([]);

onBeforeMount(() => GetProductData());

// 退出账号
const OnLogout = () =>
{
    proxy.$confirm({
        title:'退出账号',
        message:'是否确认退出当前账号？'
    }).then((result) =>
    {
        proxy.$success({
            message:'退出当前账号成功',
            onClose:() =>
            {
                proxy.$business.value = {};

                proxy.$router.push('/business/login');
            }
        })
    }).catch((err) => {});
}

const GetProductData = async () =>
{
    let result = await proxy.$http.post({
        url:'/business/product'
    })

    if(result.code === 1)
    {
        ProductList.value = result.data;
    }
}
</script>

<style scoped>
@import url('/assets/css/BusinessIndex.css');
</style>